<!--
 * @Description: 文件描述
 * @Author: 程前
 * @Date: 2024-12-13 15:48:12
 * @LastEditors: 程前
 * @LastEditTime: 2024-12-25 17:01:34
-->
<template>
    <div class="config-panel-plotting">
        <div class="config-item">
            <div class="config-item-label">名称</div>
            <div class="config-item-value"> <el-input v-model="configData.name" />
            </div>
        </div>
        <div class="config-item">
            <el-color-picker v-model="configData.labelColor" />
        </div>
        <div v-if="!isImage" class="config-item">
            <div class="config-item-label">标绘颜色</div>
            <div class="config-item-value"></div>
            <el-color-picker show-alpha v-model="configData.color" />
        </div>
        <div class="config-item">
            <div class="config-item-label">旋转角度</div>
            <div class="config-item-value">
                <div class="config-item-value">
                    <el-input-number v-model="configData.rotation" :max="360" :min="-360" controls-position="right">
                        <template #suffix>
                            <span>°</span>
                        </template>
                    </el-input-number>
                </div>
            </div>
        </div>

        <div class="config-item">
            <div class="config-item-label">贴地</div>
            <div class="config-item-value"> <el-checkbox v-model="configData.isClampToGround" size="large" />
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { onBeforeMount, ref, computed, onUnmounted } from "vue";
import { useCesiumEditStore } from "@/store/modules/cesium-edit";
import { eventBus } from "@/utils"

/**
 * 初始化数据
 */
const cesiumEditStore = useCesiumEditStore()


/**
 * 当前标注类型
 */
const isImage = computed(() => {
    return cesiumEditStore.plotting.type === 'image'
})

/**
 * 初始化配置
 */
const configData = ref<any>({})
onBeforeMount(() => {
    eventBus.on('edit-config-plotting', (data: any) => {
        const config = cesiumEditStore.plotting
        configData.value = isImage.value ? config.imageConfig : config.vectorConfig
    })
})

/**
 * 卸载监听
 */
onUnmounted(() => {
    eventBus.off('edit-config-plotting')
})

</script>



<style lang="less" scoped>
.config-panel-plotting {
    display: flex;
    // width: 800px;
    height: 100%;
    background-color: #fff;
    border-radius: 6px;
    padding: 1px 12px;

    .config-item {
        display: flex;
        align-items: center;
        margin-right: 12px;

        &-label {
            color: #000;
            margin: 0 12px 0 6px;
        }
    }
}

.el-input {
    width: 120px;
}

.el-input-number {
    width: 110px;
}
</style>
